<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>

</head>
<body>
<div id="app">
    <h1>点击显示小电影案例</h1>
    <button @click="handleLoad">加载</button>
    <div v-for="film in filmList">
        <img :src="film.poster" alt="" height="200px" width="150px">
        <div>
            <h3>{{film.name}}</h3>
            <p>主演：
                <span v-for="item in film.actors">
                {{item.name}} &nbsp;&nbsp;
            </span>
            </p>
            <p>{{film.nation}}|{{film.runtime}}</p>
        </div>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmList: []

        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/film').then(res => {
                    if (res.data.code == 100) {
                        this.filmList = res.data.results
                    } else {
                        alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>
</html>